<template>
  <div class="snow-page">
    <div class="snow-inner">

      <a-card class="margin-top" :bordered="false">
        <a-row align="center">
          <a-col :span="24">
            <a-tabs :type="type" :size="size">
              <a-tab-pane key="1" title="水">
                <a-table row-key="key" size="small" :bordered="{
                  cell: true
                }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :loading="loading" :columns="columns1"
                  :data="data1" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys"
                  :pagination="pagination" @page-change="pageChange" @page-size-change="pageSizeChange">

                  <template #SJ="{record}">
                   {{ formatDate(record.SJ.time) }}
                  </template>
                  <template #optional>
                    <a-space>
                      <a-button size="mini" type="primary">详情</a-button>
                      <a-button size="mini">修改</a-button>
                      <a-popconfirm content="确定删除这条数据吗?" type="warning">
                        <a-button size="mini" type="primary" status="danger">删除</a-button>
                      </a-popconfirm>
                    </a-space>
                  </template>
                </a-table>
              </a-tab-pane>
              <a-tab-pane key="2" title="大气">
                <a-table row-key="key" size="small" :bordered="{
                  cell: true
                }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :loading="loading" :columns="columns2"
                  :data="data2" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys"
                  :pagination="pagination" @page-change="pageChange" @page-size-change="pageSizeChange">
                  <template #avatar="{ record }">
                    <a-avatar auto-fix-font-size :size="30" :style="{
                      backgroundColor: '#14a9f8'
                    }">
                      {{ record.avatar }}
                    </a-avatar>
                  </template>

                  <template #optional>
                    <a-space>
                      <a-button size="mini" type="primary">详情</a-button>
                      <a-button size="mini">修改</a-button>
                      <a-popconfirm content="确定删除这条数据吗?" type="warning">
                        <a-button size="mini" type="primary" status="danger">删除</a-button>
                      </a-popconfirm>
                    </a-space>
                  </template>
                </a-table>
              </a-tab-pane>
              <a-tab-pane key="3" title="声">
                <a-table row-key="key" size="small" :bordered="{
                  cell: true
                }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :loading="loading" :columns="columns3"
                  :data="data3" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys"
                  :pagination="pagination" @page-change="pageChange" @page-size-change="pageSizeChange">
                  <template #avatar="{ record }">
                    <a-avatar auto-fix-font-size :size="30" :style="{
                      backgroundColor: '#14a9f8'
                    }">
                      {{ record.avatar }}
                    </a-avatar>
                  </template>

                  <template #optional>
                    <a-space>
                      <a-button size="mini" type="primary">详情</a-button>
                      <a-button size="mini">修改</a-button>
                      <a-popconfirm content="确定删除这条数据吗?" type="warning">
                        <a-button size="mini" type="primary" status="danger">删除</a-button>
                      </a-popconfirm>
                    </a-space>
                  </template>
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </a-col>
          <a-col :span="24"> </a-col>
        </a-row>
      </a-card>

    </div>
  </div>
</template>

<script setup lang="ts">
import { getCommonTableListAPI } from "@/api/modules/table/index";
import { List, FormData, RowSelection, Pagination } from "./config";
const formData = reactive<FormData>({
  form: {
    name: "",
    phone: "",
    email: "",
    address: "",
    status: null
  },
  search: false
});
const type = ref("rounded");
const size = ref("medium");
const selectedKeys = ref<string[]>([]);
const rowSelection = reactive<RowSelection>({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false
});
const pagination = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
const pageChange = (page: number) => {
  pagination.value.current = page;
};
const pageSizeChange = (pageSize: number) => {
  pagination.value.pageSize = pageSize;
};
function formatDate(val: any) {
    const date = new Date(val);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 加1并补零
    const day = String(date.getDate()).padStart(2, '0'); // 补零

    return `${year}-${month}-${day}`;
}
const data1 = ref([
  {
    "SZLB": "IV",
    "SZMB": "III",
    "YUE": 6,
    "HL": "七滧港",
    "SJ": {
      "nanos": 0,
      "time": 1750210800000,
      "minutes": 40,
      "seconds": 0,
      "hours": 9,
      "month": 5,
      "timezoneOffset": -480,
      "year": 125,
      "day": 3,
      "date": 18
    },
    "ISGK": "区考",
    "NIAN": 2025,
    "TP": 0.28,
    "DM": "新陈海公路桥",
    "AD": 0.29,
    "QX": "崇明县",
    "WD": 31.5280104,
    "GMSJ": 5.5,
    "COD": 18,
    "JD": 121.7538694,
    "RJY": 6.04,
    "BOD": 3.8,
    "DMDM": "140414092939"
  },
  {
    "SZLB": "II",
    "SZMB": "III",
    "YUE": 6,
    "HL": "新开港",
    "SJ": {
      "nanos": 0,
      "time": 1749171600000,
      "minutes": 0,
      "seconds": 0,
      "hours": 9,
      "month": 5,
      "timezoneOffset": -480,
      "year": 125,
      "day": 5,
      "date": 6
    },
    "ISGK": "区考",
    "NIAN": 2025,
    "TP": 0.06,
    "DM": "长兴江南大道桥",
    "AD": 0.05,
    "QX": "崇明县",
    "WD": 31.3817298,
    "GMSJ": 2.6,
    "COD": 8,
    "JD": 121.7147194,
    "RJY": 7.36,
    "BOD": 2.4,
    "DMDM": "130321104330"
  },
  {
    "SZLB": "II",
    "SZMB": "III",
    "YUE": 6,
    "HL": "裕南河",
    "SJ": {
      "nanos": 0,
      "time": 1750207200000,
      "minutes": 40,
      "seconds": 0,
      "hours": 8,
      "month": 5,
      "timezoneOffset": -480,
      "year": 125,
      "day": 3,
      "date": 18
    },
    "ISGK": "区考",
    "NIAN": 2025,
    "TP": 0.06,
    "DM": "裕丰村委会",
    "AD": 0.04,
    "QX": "崇明县",
    "WD": 31.5306993,
    "GMSJ": 1.6,
    "COD": 5,
    "JD": 121.8357107,
    "RJY": 6.27,
    "BOD": 1.3,
    "DMDM": "140414093116"
  },
  {
    "SZLB": "IV",
    "SZMB": "III",
    "YUE": 6,
    "HL": "元沙镇港",
    "SJ": {
      "nanos": 0,
      "time": 1749175200000,
      "minutes": 0,
      "seconds": 0,
      "hours": 10,
      "month": 5,
      "timezoneOffset": -480,
      "year": 125,
      "day": 5,
      "date": 6
    },
    "ISGK": "区考",
    "NIAN": 2025,
    "TP": 0.08,
    "DM": "潘圆公路桥",
    "AD": 0.29,
    "QX": "崇明县",
    "WD": 31.3446607,
    "GMSJ": 6.3,
    "COD": 21,
    "JD": 121.7738604,
    "RJY": 7.45,
    "BOD": 4.8,
    "DMDM": "130115143315"
  },
  {
    "SZLB": "III",
    "SZMB": "III",
    "YUE": 6,
    "HL": "北横引河",
    "SJ": {
      "nanos": 0,
      "time": 1749178200000,
      "minutes": 50,
      "seconds": 0,
      "hours": 10,
      "month": 5,
      "timezoneOffset": -480,
      "year": 125,
      "day": 5,
      "date": 6
    },
    "ISGK": "区考",
    "NIAN": 2025,
    "TP": 0.08,
    "DM": "白港西桥",
    "AD": 0.08,
    "QX": "崇明县",
    "WD": 31.8303993,
    "GMSJ": 3.3,
    "COD": 11,
    "JD": 121.2911385,
    "RJY": 5.73,
    "BOD": 3.1,
    "DMDM": "310260155111"
  },
  {
    "SZLB": "IV",
    "SZMB": "III",
    "YUE": 6,
    "HL": "北横引河",
    "SJ": {
      "nanos": 0,
      "time": 1748739600000,
      "minutes": 0,
      "seconds": 0,
      "hours": 9,
      "month": 5,
      "timezoneOffset": -480,
      "year": 125,
      "day": 0,
      "date": 1
    },
    "ISGK": "国考",
    "NIAN": 2025,
    "TP": 0.12,
    "DM": "前卫村桥",
    "AD": 0.46,
    "QX": "崇明县",
    "WD": 31.7179298,
    "GMSJ": 5.6,
    "COD": null,
    "JD": 121.5047,
    "RJY": 4,
    "BOD": null,
    "DMDM": "310260155197"
  },
]);
const columns1 = [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "河道",
    dataIndex: "HL",
    width:100
  },
  {
    title: "断面",
    dataIndex: "DM",
    align: "center",
    width:120
  },
  {
    title: "时间",
    dataIndex: "SJ.time",
    width: 120,
    slotName: "SJ",
  },
  {
    title: "高锰酸盐指数(mg/L)",
    dataIndex: "GMSJ",
    width:120
  },
  {
    title: "溶解氧(mg/L)",
    dataIndex: "RJY",
    width:120
  },
  {
    title: "化学需氧量((mg/L))",
    dataIndex: "COD",
    align: "center",
    width:120
   
  },
  {
    title: "五日生化需氧量((mg/L))",
    dataIndex: "BOD",
    width:120
  },
  {
    title: "氨氮(mg/L)",
    dataIndex: "AD",
    width:120
  },
  {
    title: "总磷(mg/L)",
    dataIndex: "TP",
    width:120
  },
  {
    title: "水质类别",
    dataIndex: "SZLB",
    width:120
  },
  //水质类别

  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];

const data2 = ref([
{
          "PM25": 0.026,
          "ZDMC": "城桥扬子中学",
          "QUALITY": "优",
          "PM10": null,
          "SO2": null,
          "NO2": null,
          "SJ": "2025-07-15 10:00:00",
          "SJ2":"2025-07-15 10:00:00",
          "SITEID": "249",
          "ZY": "PM2.5",
          "CO": null,
          "AQI": 38,
          "O3": null,
          "Y": "31.652904960200001",
          "X": "121.550957929000010"
        },
        {
          "PM25": 0.039,
          "ZDMC": "崇明长兴岛",
          "QUALITY": "良",
          "PM10": 0.043,
          "SO2": 0.007,
          "NO2": 0.017,
          "SJ": "2025-07-15 10:00:00",
          "SITEID": "286",
          "ZY": "PM2.5",
          "CO": 0.373,
          "AQI": 55,
          "O3": 0.104,
          "Y": "31.400201154400001",
          "X": "121.672146254000000"
        },
        {
          "PM25": 0.022,
          "ZDMC": "崇明交通站",
          "QUALITY": "优",
          "PM10": null,
          "SO2": null,
          "NO2": 0.055,
          "SJ": "2025-07-15 10:00:00",
          "SITEID": "251",
          "ZY": "PM2.5",
          "CO": 0.856,
          "AQI": 32,
          "O3": null,
          "Y": "31.472566946499999",
          "X": "121.768451644000000"
        },
        {
          "PM25": 0.03,
          "ZDMC": "崇明横沙岛",
          "QUALITY": "优",
          "PM10": null,
          "SO2": 0.007,
          "NO2": 0.03,
          "SJ": "2025-07-15 10:00:00",
          "SITEID": "275",
          "ZY": "PM2.5",
          "CO": 0.511,
          "AQI": 43,
          "O3": 0.047,
          "Y": "31.315637082700000",
          "X": "121.839743995000010"
        },
        {
          "PM25": 0.026,
          "ZDMC": "崇明绿华",
          "QUALITY": "优",
          "PM10": 0.039,
          "SO2": 0.004,
          "NO2": 0.028,
          "SJ": "2025-07-15 10:00:00",
          "SITEID": "247",
          "ZY": "PM10",
          "CO": 0.364,
          "AQI": 39,
          "O3": 0.108,
          "Y": "31.786789300799999",
          "X": "121.224841092999990"
        },
        {
          "PM25": 0.028,
          "ZDMC": "崇明现代农业园区",
          "QUALITY": "优",
          "PM10": 0.032,
          "SO2": 0.003,
          "NO2": 0.023,
          "SJ": "2025-07-15 10:00:00",
          "SITEID": "237",
          "ZY": "PM2.5",
          "CO": 0.599,
          "AQI": 40,
          "O3": 0.109,
          "Y": "31.559045463200000",
          "X": "121.856906917000000"
        },
        {
          "PM25": 0.035,
          "ZDMC": "崇明城桥",
          "QUALITY": "良",
          "PM10": 0.052,
          "SO2": 0.004,
          "NO2": 0.028,
          "SJ": "2025-07-15 10:00:00",
          "SITEID": "176",
          "ZY": "PM10",
          "CO": 0.526,
          "AQI": 51,
          "O3": 0.114,
          "Y": "31.617255184400001",
          "X": "121.414250439000000"
        },
        {
          "PM25": 0.016,
          "ZDMC": "崇明上实东滩",
          "QUALITY": "优",
          "PM10": 0.031,
          "SO2": 0.005,
          "NO2": 0.03,
          "SJ": "2025-07-15 10:00:00",
          "SITEID": "276",
          "ZY": "O3",
          "CO": 0.492,
          "AQI": 35,
          "O3": 0.11,
          "Y": "31.498912669500001",
          "X": "121.947814135000000"
        }
])

const columns2 = [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "站点名称",
    dataIndex: "ZDMC",
    width:100
  },
  {
    title: "时间",
    dataIndex: "SJ",
    align: "center",
    width:120
  },
  {
    title: "PM2.5(ug/m³)",
    dataIndex: "PM25",
    width: 120,
  
  },
  {
    title: "PM10(ug/m³)",
    dataIndex: "PM10",
    width:120
  },
  {
    title: "O3((ug/m³))",
    dataIndex: "O3",
    width:120
  },
  {
    title: "CO((ug/m³))",
    dataIndex: "CO",
    align: "center",
    width:120
   
  },
  {
    title: "SO2(ug/m³)",
    dataIndex: "SO2",
    width:120
  },
  {
    title: "NO2(ug/m³)",
    dataIndex: "NO2",
    width:120
  },
  {
    title: "实时指数",
    dataIndex: "AQI",
    width:120
  },
  {
    title: "质量评价",
    dataIndex: "QUALITY",
    width:120
  },
  {
    title: "首要污染物",
    dataIndex: "",
    width:120
  },

  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];

const data3 = ref([
{
          "SD": 4.5,
          "SJ": "2025-07-14",
          "SJ2": "2025-07-14 12:59:59",
          "L10": 40.2,
          "XH": "F",
          "L50": 32.6,
          "LMIN": 37.2,
          "LEQA": 45.3,
          "WD": 31.625,
          "ZSLX": "交通噪声",
          "ZY": "夜间",
          "JD": 121.4104,
          "LMAX": 50.6,
          "CDMC": "城桥扬子中学",
          "L90": 70.6
        },
        {
          "SD": 4.5,
          "SJ": "2025-07-14",
          "SJ2": "2025-07-14 10:59:59",
          "L10": 44.2,
          "XH": "F",
          "L50": 44.6,
          "LMIN": 48.2,
          "LEQA": 60.0,
          "WD": 31.625,
          "ZSLX": "交通噪声",
          "ZY": "夜间",
          "JD": 121.4104,
          "LMAX": 60.6,
          "CDMC": "城桥扬子中学",
          "L90": 56.6
        },
        {
          "SD": 4.5,
          "SJ": "2025-07-14",
          "SJ2": "2025-07-14 11:59:59",
          "L10": 58.2,
          "XH": "F",
          "L50": 49.6,
          "LMIN": 55.2,
          "LEQA": 42.1,
          "WD": 31.625,
          "ZSLX": "交通噪声",
          "ZY": "夜间",
          "JD": 121.4104,
          "LMAX": 70.6,
          "CDMC": "东平嘉和苑度假村",
          "L90": 48.6
        },
        {
          "SD": 4.5,
          "SJ": "2025-07-14",
          "SJ2": "2025-07-14 13:59:59",
          "L10":60.2,
          "XH": "F",
          "L50": 52.6,
          "LMIN": 44.2,
          "LEQA": 59.2,
          "WD": 31.625,
          "ZSLX": "交通噪声",
          "ZY": "夜间",
          "JD": 121.4104,
          "LMAX": 67.6,
          "CDMC": "东平嘉和苑度假村",
          "L90": 60.6
        },
        {
          "SD": 4.5,
          "SJ": "2025-07-14",
          "SJ2": "2025-07-14 14:59:59",
          "L10": 46.2,
          "XH": "F",
          "L50": 48.6,
          "LMIN": 40.2,
          "LEQA": 59.7,
          "WD": 31.625,
          "ZSLX": "交通噪声",
          "ZY": "夜间",
          "JD": 121.4104,
          "LMAX": 56,
          "CDMC": "城桥崇明工业园区",
          "L90": 50.6
        },
        {
          "SD": 4.5,
          "SJ": "2025-07-14",
          "SJ2": "2025-07-14 15:59:59",
          "L10": 50.2,
          "XH": "F",
          "L50": 36.6,
          "LMIN": 38.2,
          "LEQA": 48.9,
          "WD": 31.625,
          "ZSLX": "交通噪声",
          "ZY": "夜间",
          "JD": 121.4104,
          "LMAX": 68.6,
          "CDMC": "城桥崇明工业园区",
          "L90": 40.6
        },
        {
          "SD": 4.5,
          "SJ": "2025-07-14",
          "SJ2": "2025-07-14 16:59:59",
          "L10": 50.2,
          "XH": "F",
          "L50": 42.6,
          "LMIN": 30.2,
          "LEQA": 48.9,
          "WD": 31.625,
          "ZSLX": "交通噪声",
          "ZY": "夜间",
          "JD": 121.4104,
          "LMAX": 42.6,
          "CDMC": "城桥扬子中学",
          "L90": 30.6
        },
])

const columns3= [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "站点名称",
    dataIndex: "CDMC",
    width:100
  },
  {
    title: "开始时间",
    dataIndex: "SJ",
    align: "center",
    width:120
  },
  {
    title: "结束时间",
    dataIndex: "SJ2",
    align: "center",
    width:120
  },
  {
    title: "LAEQ(dB/A)",
    dataIndex: "LAEQ",
    width: 120,
  
  },
  {
    title: "L10(dB/A)",
    dataIndex: "L10",
    width:120
  },
  {
    title: "L50(dB/A)",
    dataIndex: "L50",
    width:120
  },
  {
    title: "L90(dB/A)",
    dataIndex: "L90",
    align: "center",
    width:120
   
  },
  {
    title: "Lmax(dB/A)",
    dataIndex: "LMAX",
    width:120
  },
  {
    title: "Lmin(dB/A)",
    dataIndex: "LMIN",
    width:120
  },
  

  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];
const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
  getCommonTableList();
};
const loading = ref<boolean>(false);
const data = reactive<List[]>([]);
const getCommonTableList = async () => {
  try {
    loading.value = true;
    // let res = await getCommonTableListAPI();
    // Object.assign(data, res.data.list);
    // pagination.value.total = res.data.total;
  } finally {
    loading.value = false;
  }
};
getCommonTableList();
</script>

<style lang="scss" scoped>
.search-btn {
  margin-bottom: 20px;
}
</style>